<template>
    <div class="p-4">
        <div class="d-flex justify-content-between pb-4">
            <div>
                <p class="m-0 fs-6">
                    <span class="fw-bold">{{ t("logs") }}</span>
                </p>
            </div>

            <div>
                <div id="logs" />
            </div>
        </div>

        <Bar
            v-if="loading"
            :data="skeletonData"
            :options="skeletonOptions"
            class="tall"
        />
        <Bar
            v-else-if="props.data.length > 0"
            :data="parsedData"
            :options="options"
            :plugins="[barLegend]"
            class="tall"
        />
        <LogsNoData v-else />
    </div>
</template>

<script setup>
    import {computed} from "vue";
    import {useI18n} from "vue-i18n";

    import moment from "moment";
    import {Bar} from "vue-chartjs";

    import {barLegend} from "../legend.js";

    import {defaultConfig, getFormat} from "../../../../../utils/charts.js";
    import {useScheme} from "../../../../../utils/scheme";
    import Logs from "../../../../../utils/logs.js";

    import LogsNoData from "./LogsNoData.vue";
    import {useTheme} from "../../../../../utils/utils";

    const {t} = useI18n({useScope: "global"});

    const props = defineProps({
        data: {
            type: Array,
            required: true,
        },
        loading: {
            type: Boolean,
            default: false
        }
    });

    const theme = useTheme();
    const scheme = useScheme("logs");

    const parsedData = computed(() => {
        let datasets = props.data.reduce(function (accumulator, value) {
            Object.keys(value.counts).forEach(function (state) {
                if (accumulator[state] === undefined) {
                    accumulator[state] = {
                        label: state,
                        backgroundColor: scheme.value[state],
                        yAxisID: "y",
                        data: [],
                    };
                }

                accumulator[state].data.push(value.counts[state]);
            });

            return accumulator;
        }, Object.create(null));

        datasets = Logs.sort(datasets);

        return {
            labels: props.data.map((r) =>
                moment(r.timestamp).format(getFormat(r.groupBy)),
            ),
            datasets: Object.values(datasets),
        };
    });

    const options = computed(() =>
        defaultConfig({
            barThickness: 12,
            skipNull: true,
            borderSkipped: false,
            borderColor: "transparent",
            borderWidth: 2,
            plugins: {
                barLegend: {containerID: "logs"},
                tooltip: {
                    enabled: true,
                    filter: (value) => value.raw,
                    callbacks: {
                        label: (value) => {
                            const {label} = value.dataset;
                            return `${label.toLowerCase().capitalize()}: ${value.raw}`;
                        },
                        footer: (value) => {
                            const total = value.reduce((a, c) => a + c.raw, 0);
                            return `${t("Total")}: ${total}`;
                        },
                    },
                },
            },
            scales: {
                x: {
                    title: {
                        display: true,
                        text: t("date"),
                    },
                    grid: {
                        display: false,
                    },
                    position: "bottom",
                    display: true,
                    stacked: true,
                    ticks: {
                        maxTicksLimit: 8,
                        callback: function (value) {
                            return moment(
                                new Date(this.getLabelForValue(value)),
                            ).format("MM/DD");
                        },
                    },
                },
                y: {
                    title: {
                        display: true,
                        text: t("logs"),
                    },
                    grid: {
                        display: false,
                    },
                    display: true,
                    position: "left",
                    stacked: true,
                    ticks: {
                        maxTicksLimit: 8,
                    },
                },
            },
        }, theme.value),
    );

    // Add skeleton data
    const skeletonData = computed(() => {
        const barColor = theme.value === "dark"
            ? "rgba(255, 255, 255, 0.08)"
            : "rgba(0, 0, 0, 0.06)";

        return {
            labels: Array(18).fill(""),
            datasets: [{
                data: Array(18).fill(0).map(() => Math.random() * 70 + 30),
                backgroundColor: barColor,
                borderRadius: 2,
                barThickness: 12,
            }]
        };
    });

    // Add skeleton options
    const skeletonOptions = computed(() => ({
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            },
            tooltip: {
                enabled: false
            }
        },
        scales: {
            x: {
                display: false,
                grid: {
                    display: false
                }
            },
            y: {
                display: false,
                grid: {
                    display: false
                },
                min: 0,
                max: 100
            }
        }
    }));
</script>

<style lang="scss" scoped>
@import "@kestra-io/ui-libs/src/scss/variables";

$height: 200px;

.tall {
    height: $height;
    max-height: $height;
}

.small {
    font-size: $font-size-xs;
    color: $gray-700;

    html.dark & {
        color: $gray-300;
    }
}
</style>
